<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Frame (GUI)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Frame_(GUI)"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Frame_GUI rootpage-Frame_GUI skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Frame (GUI)</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r1305433154">
/* start https://en.wikipedia.org/ */
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style>
<p>A <b>frame</b>, or <b>group box</b>, is a type of box within which a collection of <a href="Graphical_control_element" class="mw-redirect" title="Graphical control element">graphical control elements</a> can be grouped as a way to show relationships visually,<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> either because the items are functionally related (such as a <a href="Radio_button" title="Radio button">radio button</a>), or because they apply to related objects.
</p><p>In <a href="HTML" title="HTML">HTML</a> (where <i>frame</i> has <a href="HTML_element#Frames" title="HTML element">another meaning</a>, referring to an individually scrollable portion of a page), this kind of grouping box is called a <i>fieldset</i> after the HTML element of the same name.
</p><p>In the adjacent image, the top frame has no title. The two frames below have titles, and a radio button outside them, presumably to select one or the other. The lower of the two boxes is dimmed, or <a href="Enabled/disabled" class="mw-redirect" title="Enabled/disabled">disabled</a>, indicating its widgets cannot be selected. Each of the frames (as well as the area outside of the frames) has a checked radio button, while normally only one of the buttons can be selected.
</p><p>Any widget, such as nested frames, can be placed inside of a frame, not merely radio buttons.
</p>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/windows/desktop/dn742405%28v=vs.85%29.aspx">Windows Dev Center Help: Group Box</a> Microsoft Corporation, retrieved 11/30/2014,</span>
</li>
</ol></div>
<div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">
/* start https://en.wikipedia.org/ */
.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" ยท ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}
/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1236075235">
/* start https://en.wikipedia.org/ */
.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style></div><div role="navigation" class="navbox" aria-labelledby="Graphical_control_elements194" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r1239400231">
/* start https://en.wikipedia.org/ */
.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}
/* end https://en.wikipedia.org/ */
</style><div id="Graphical_control_elements194" style="font-size:114%;margin:0 4em"><a href="Graphical_widget" title="Graphical widget">Graphical control elements</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Command input</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Adjustment_handle" title="Adjustment handle">Adjustment handle</a></li>
<li><a href="Button_(computing)" title="Button (computing)">Button</a></li>
<li><a href="Context_menu" title="Context menu">Context menu</a></li>
<li><a href="Drop-down_list" title="Drop-down list">Drop-down list</a></li>
<li><a href="Hamburger_button" title="Hamburger button">Hamburger button</a></li>
<li><a href="Menu_(computing)" title="Menu (computing)">Menu</a></li>
<li><a href="Pie_menu" title="Pie menu">Pie menu</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Data input-output</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Checkbox" title="Checkbox">Checkbox</a></li>
<li><a href="Color_picker" title="Color picker">Color picker</a></li>
<li><a href="Combo_box" title="Combo box">Combo box</a></li>
<li><a href="Cycle_button" title="Cycle button">Cycle button</a></li>
<li><a href="Date_picker" title="Date picker">Date picker</a></li>
<li><a href="Grid_view" title="Grid view">Grid view</a></li>
<li><a href="Toggle_switch_(widget)" title="Toggle switch (widget)">Toggle switch</a></li>
<li><a href="List_box" title="List box">List box</a></li>
<li><a href="List_builder" title="List builder">List builder</a></li>
<li><a href="Radio_button" title="Radio button">Radio button</a></li>
<li><a href="Scrollbar" title="Scrollbar">Scrollbar</a></li>
<li><a href="Search_box" title="Search box">Search box</a></li>
<li><a href="Slider_(computing)" title="Slider (computing)">Slider</a></li>
<li><a href="Spinner_(computing)" title="Spinner (computing)">Spinner</a></li>
<li><a href="Text_box" title="Text box">Text box</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Informational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Balloon_help" title="Balloon help">Balloon help</a></li>
<li><a href="HUD_(computing)" class="mw-redirect" title="HUD (computing)">Head-up display in computing</a></li>
<li><a href="HUD_(video_gaming)" class="mw-redirect" title="HUD (video gaming)">HUD in video games</a></li>
<li><a href="Icon_(computing)" title="Icon (computing)">Icon</a></li>
<li><a href="Infobar" title="Infobar">Infobar</a></li>
<li><a href="Label_(control)" title="Label (control)">Label</a></li>
<li><a href="Loading_screen" title="Loading screen">Loading screen</a></li>
<li><a href="Progress_indicator" title="Progress indicator">Progress indicator</a>
<ul><li><a href="Progress_bar" title="Progress bar">Progress bar</a></li>
<li><a href="Splash_screen" title="Splash screen">Splash screen</a></li>
<li><a href="Throbber" title="Throbber">Throbber</a></li></ul></li>
<li><a href="Sidebar_(computing)" title="Sidebar (computing)">Sidebar</a></li>
<li><a href="Status_bar" title="Status bar">Status bar</a></li>
<li><a href="Pop-up_notification" title="Pop-up notification">Toast</a></li>
<li><a href="Tooltip" title="Tooltip">Tooltip</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Containers</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Accordion_(GUI)" title="Accordion (GUI)">Accordion</a></li>
<li><a href="Tree_view" title="Tree view">Tree view</a></li>
<li><a href="Client-side_decoration" title="Client-side decoration">Client-side decoration</a></li>
<li><a href="Disclosure_widget" title="Disclosure widget">Disclosure widget</a></li>
<li><a href="Menu_bar" title="Menu bar">Menu bar</a></li>
<li><a href="Panel_(computer_software)" title="Panel (computer software)">Panel</a></li>
<li><a href="Popover_(GUI)" title="Popover (GUI)">Popover</a></li>
<li><a href="Ribbon_(computing)" title="Ribbon (computing)">Ribbon</a></li>
<li><a href="Tab_(interface)" title="Tab (interface)">Tab</a></li>
<li><a href="Toolbar" title="Toolbar">Toolbar</a></li>
<li><a href="Window_(computing)" title="Window (computing)">Window</a>
<ul><li><a href="Window_decoration" class="mw-redirect" title="Window decoration">Window decoration</a></li></ul></li>
<li><a href="Workspace" title="Workspace">Workspace</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Navigational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Address_bar" title="Address bar">Address bar</a></li>
<li><a href="Breadcrumb_navigation" title="Breadcrumb navigation">Breadcrumb navigation</a></li>
<li><a href="Hyperlink" title="Hyperlink">Hyperlink</a></li>
<li><a href="Navigation_bar" title="Navigation bar">Navigation bar</a></li>
<li><a href="Virtual_desktop" title="Virtual desktop">Virtual desktop</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><span class="nowrap">Special <a href="Window_(computing)" title="Window (computing)">windows</a></span></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Alert_dialog_box" title="Alert dialog box">Alert dialog box</a></li>
<li><a href="Dialog_box" title="Dialog box">Dialog box</a></li>
<li><a href="File_dialog" title="File dialog">File dialog</a></li>
<li><a href="Inspector_window" title="Inspector window">Inspector window</a></li>
<li><a href="Modal_window" title="Modal window">Modal window</a></li>
<li><a href="Palette_window" title="Palette window">Palette window</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related concepts</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="File_viewer" title="File viewer">File viewer</a></li>
<li><a href="List_of_graphical_user_interface_elements" title="List of graphical user interface elements">List of graphical user interface elements</a></li>
<li><a href="Layout_manager" title="Layout manager">Layout manager</a></li>
<li><a href="Look_and_feel" title="Look and feel">Look and feel</a></li>
<li><a href="Mouseover" title="Mouseover">Mouseover</a></li>
<li><a href="Scrolling" title="Scrolling">Scrolling</a></li>
<li><a href="Widget_toolkit" title="Widget toolkit">Widget toolkit</a></li>
<li><a href="WIMP_(computing)" title="WIMP (computing)">WIMP</a></li>
<li><a href="Zoomable_user_interface" class="mw-redirect" title="Zoomable user interface">Zoomable user interface</a></li></ul>
</div></td></tr></tbody></table></div>
<p><br>
</p>
<style data-mw-deduplicate="TemplateStyles:r1271159938">
/* start https://en.wikipedia.org/ */
.mw-parser-output .asbox{position:relative;overflow:hidden}.mw-parser-output .asbox table{background:transparent}.mw-parser-output .asbox p{margin:0}.mw-parser-output .asbox p+p{margin-top:0.25em}.mw-parser-output .asbox-body{font-style:italic}.mw-parser-output .asbox-note{font-size:smaller}.mw-parser-output .asbox .navbar{position:absolute;top:-0.75em;right:1em;display:none}.mw-parser-output :not(p):not(.asbox)+style+.asbox,.mw-parser-output :not(p):not(.asbox)+link+.asbox{margin-top:3em}
/* end https://en.wikipedia.org/ */
</style></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2024-06-04" href="https://en.wikipedia.org/wiki/?title=Frame_(GUI)&oldid=1227259877">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>